<template>
  <div class="home">
    <iframe
      ref="myIframe"
      id="iframe_box"
      style="width: 100%; height: 100%"
      :src="`${sanweiUrl}/Mine_NMGHZ/Scene_${jiangshangxiaData}`"
      frameborder="0"
    ></iframe>
    <!-- `${sanweiUrl}/Mine_NMGHZ/Scene_0_0`  井上 -->
    <!-- `${sanweiUrl}/Mine_NMGHZ/Scene_Geology`  井下 -->
    <div class="top-right">
      <div class="times">
        <div class="t1">{{ dates.y2 }}</div>
        <div class="t2">{{ dates.y1 }}</div>
      </div>
      <div class="line"></div>
      <div class="weather">
        <div>{{ weatherObject.low }}&nbsp;~&nbsp;{{ weatherObject.high }}</div>
        <div
          style="
            display: flex;
            justify-content: space-evenly;
            align-items: center;
          "
        >
          <span>{{ weatherObject.week }}</span
          ><span>{{ weatherObject.type }}</span>
        </div>
      </div>
      <div class="topRight">
        <!-- <div class="t3">{{ dates.y3 }}</div> -->
        <el-dropdown class="avator" trigger="click">
          <div class="avatar-wrapper">
            <img src="@/assets/images/头像.png" alt="" />
            <span class="names"
              ><span style="font-size: 16px">{{
                user.userName || "admin"
              }}</span></span
            >
            <!-- <i class="el-icon-caret-bottom" style="font-size: 20px; color: #fff"/> -->
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="zizhengduanFn">
              <!-- divided -->
              <span style="color: #2ddbea">自诊断</span>
            </el-dropdown-item>
            <el-dropdown-item @click.native="navTo">
              <!-- divided -->
              <span style="color: #2ddbea">后台管理</span>
            </el-dropdown-item>
            <el-dropdown-item @click.native="logout">
              <!-- divided -->
              <span style="color: #2ddbea">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!-- 自诊断 -->
    <!-- <img
      @click="zizhengduanFn"
      :style="{
        transform: zizhengduandialogVisible ? 'rotate(0deg)' : 'rotate(180deg)',
      }"
      class="zizhengduan"
      src="@/assets/images/折叠.png"
      alt=""
    /> -->
    <img class="topImg" src="@/assets/images/华资智能地质保障平台.png" alt="" />
    <img
      @click="jiangshangxiaFn"
      v-if="!jiangshangxiaFlag"
      class="jingshang"
      src="@/assets/images/井上.png"
      alt=""
    />
    <img
      @click="jiangshangxiaFn"
      v-else
      class="jingshang"
      src="@/assets/images/井下.png"
      alt=""
    />
    <!-- <img class="topImg" src="@/assets/images/顶部标题.png" alt="" /> -->
    <!-- <div class="topTitle"><span class="txt">华资智能地质保障平台</span></div> -->
    <!-- <img
      v-if="!gjxImgFlag"
      @mouseenter="gjxImgFlag = true"
      @click="gongjuxiangFlag = !gongjuxiangFlag"
      class="gongjuxiangImg"
      src="@/assets/images/工具箱.png"
      alt=""
    />
    <img
      v-else
      @mouseleave="gjxImgFlag = false"
      @click="gongjuxiangFlag = !gongjuxiangFlag"
      class="gongjuxiangImg"
      src="@/assets/images/工具箱-active.png"
      alt=""
    />  -->
    <div
      v-if="gongjuxiangFlag"
      class="gongjuxiang"
      style="position: absolute; top: 100px; right: 66px"
    >
      <div class="top">
        <span>灾害综合防治</span>
        <span @click="gongjuxiangFlag = false" style="cursor: default">X</span>
      </div>
      <div class="bottom">
        <div class="item-bottom">
          <div class="item" @click="openDialog('历史报警')">
            <img src="@/assets/images/历史报警.png" alt="" />
            <div class="txt">历史报警</div>
          </div>
          <div class="item item2" @click="openDialog('微震')">
            <img src="@/assets/images/历史报警.png" alt="" />
            <div class="txt">微震</div>
          </div>
          <div class="item item2" @click="openDialog('区域安全评价')">
            <img src="@/assets/images/历史报警.png" alt="" />
            <div class="txt">区域安全评价</div>
          </div>
        </div>
        <div class="item-bottom">
          <div class="item" @click="openDialog('水害一张图')">
            <img src="@/assets/images/历史报警.png" alt="" />
            <div class="txt">水害一张图</div>
          </div>
          <div class="item item2" @click="openDialog('区域监测')">
            <img src="@/assets/images/历史报警.png" alt="" />
            <div class="txt">区域监测</div>
          </div>
        </div>
        <div class="zaihaititle">
          <img src="@/assets/images/lefticon.png" alt="" />
          <span style="margin-left: 10px">灾害监测</span>
        </div>
        <div class="item" @click="openDialog('水害监测')">
          <img src="@/assets/images/水害监测.png" alt="" />
          <div class="txt">水害监测</div>
        </div>
        <div class="zaihaititle">
          <img src="@/assets/images/lefticon.png" alt="" />
          <span style="margin-left: 10px">灾害预测</span>
        </div>
        <div class="item" @click="openDialog('水害预测')">
          <img src="@/assets/images/水害预测.png" alt="" />
          <div class="txt">水害预测</div>
        </div>
        <!-- <div class="zaihaititle">
          <img src="@/assets/images/lefticon.png" alt="" />
          <span style="margin-left: 10px">灾害模拟</span>
        </div>
        <div class="item-bottom">
          <div class="item" @click="openDialog('水淹模拟')">
            <img src="@/assets/images/水淹模拟.png" alt="" />
            <div class="txt">水淹模拟</div>
          </div>
          <div class="item item2" @click="openDialog('控制器')">
            <img src="@/assets/images/危险源预警.png" alt="" />
            <div class="txt">控制器</div>
          </div>
        </div> -->
        <div class="zaihaititle">
          <img src="@/assets/images/lefticon.png" alt="" />
          <span style="margin-left: 10px">双重预防</span>
        </div>
        <div class="item-bottom">
          <div class="item" @click="openDialog('危险源预警')">
            <img src="@/assets/images/危险源预警.png" alt="" />
            <div class="txt">危险源预警</div>
          </div>
          <div class="item item2" @click="openDialog('隐患点台账')">
            <img src="@/assets/images/隐患点台账.png" alt="" />
            <div class="txt">隐患点台账</div>
          </div>
        </div>
      </div>
    </div>
    <div class="nav">
      <img
        @click="openDialog('地质数据管理')"
        src="@/assets/images/地质.png"
        alt=""
      />
      <!-- <img src="@/assets/images/GIS.png" alt=""> -->
      <img src="@/assets/images/GIS-active.png" alt="" />
      <!-- <img @click="zizhengduanFn" src="@/assets/images/服务器监控.png" alt="" /> -->
    </div>
    <!-- <el-button @click="openDialog('历史报警')">历史报警</el-button> -->
    <!-- <el-button @click="openDialog('水害监测')">水害监测</el-button> -->
    <!-- <el-button @click="openDialog('水害预测')">水害预测</el-button> -->
    <!-- <el-button @click="openDialog('水淹模拟')">水淹模拟</el-button> -->
    <!-- <el-button @click="openDialog('控制器')">控制器</el-button> -->
    <!-- <el-button @click="openDialog('危险源预警')">危险源预警</el-button> -->
    <!-- <el-button @click="openDialog('区域安全评价')">区域安全评价</el-button> -->
    <!-- <el-button @click="openDialog('区域监测')">区域监测</el-button> -->
    <!-- <el-button @click="openDialog('水害一张图')">水害一张图</el-button> -->
    <!-- <el-button @click="openDialog('地质数据管理')">地质数据管理</el-button> -->
    <!-- <el-button @click="openDialog('隐患点台账')">隐患点台账</el-button> -->
    <!-- <el-button @click="openDialog('微震')">微震</el-button> -->
    <!-- <el-button style="position: absolute; top: 0; right: 0;" @click="$router.push('/system/dict')">后台</el-button> -->
    <dialogs
      :dialogVisible.sync="dialogVisible"
      :dialogTitle="dialogContent"
      :dialogWidth="dialogWidth"
      @updatedialogContent="updateDialogContentFn"
    >
      <!-- 历史报警 -->
      <div slot="content" class="lishi" v-if="dialogContent == '历史报警'">
        <!-- <chartsPannel title="charts2" class="tu1">
          <slot slot="chartContent"> -->
        <lishibaojing></lishibaojing>
        <!-- </slot>
        </chartsPannel> -->
      </div>
      <!-- 水害监测 -->
      <div
        slot="content"
        class="shuihaijiance"
        v-if="dialogContent == '水害监测'"
      >
        <div class="top">
          <chartsPannel title="涌水量变化趋势" class="tu1">
            <slot slot="chartContent">
              <yongshuiliang></yongshuiliang>
            </slot>
          </chartsPannel>
          <chartsPannel title="涌水量变化趋势" class="tu2">
            <slot slot="chartContent">
              <yongshuiliang2></yongshuiliang2>
            </slot>
          </chartsPannel>
          <chartsPannel title="月降雨量统计" class="tu1">
            <slot slot="chartContent">
              <yuejiangyuliang></yuejiangyuliang>
            </slot>
          </chartsPannel>
        </div>
        <div class="bottom">
          <chartsPannel title="实时水质PH" class="tu1">
            <slot slot="chartContent">
              <shishishuizhi></shishishuizhi>
            </slot>
          </chartsPannel>
          <chartsPannel title="水质浊度" class="tu2">
            <slot slot="chartContent">
              <shuizhizhuodu></shuizhizhuodu>
            </slot>
          </chartsPannel>
          <chartsPannel title="水质电导率" class="tu1">
            <slot slot="chartContent">
              <shuizhidiandaolv></shuizhidiandaolv>
            </slot>
          </chartsPannel>
        </div>
      </div>
      <!-- 水害预测 -->
      <div
        slot="content"
        class="shuihaiyuce"
        v-if="dialogContent == '水害预测'"
      >
        <chartsPannel title="回采工作面涌水量预测" class="left">
          <slot slot="chartContent">
            <yucecanshu></yucecanshu>
          </slot>
        </chartsPannel>
        <div class="right">
          <!-- <chartsPannel title="未来一周预测结果" class="top">
            <slot slot="chartContent">
              <weilaiyizhou></weilaiyizhou>
            </slot>
          </chartsPannel> -->
          <div class="right-bottom">
            <chartsPannel title="井上下水文数据" class="bottom1">
              <slot slot="chartContent">
                <jingshangxia></jingshangxia>
              </slot>
            </chartsPannel>
            <chartsPannel title="Q-S曲线" class="bottom2">
              <slot slot="chartContent">
                <quxian></quxian>
              </slot>
            </chartsPannel>
          </div>
        </div>
      </div>
      <!-- 水淹模拟 -->
      <div slot="content" class="lishi" v-if="dialogContent == '水淹模拟'">
        <!-- <chartsPannel title="charts2" class="tu1">
          <slot slot="chartContent"> -->
        <shuiyanmoni></shuiyanmoni>
        <!-- </slot>
        </chartsPannel> -->
      </div>
      <!-- 控制器 -->
      <div slot="content" class="lishi" v-if="dialogContent == '控制器'">
        <!-- <chartsPannel title="charts2" class="tu1">
          <slot slot="chartContent"> -->
        <kongzhiqi></kongzhiqi>
        <!-- </slot>
        </chartsPannel> -->
      </div>
      <!-- 危险源预警 -->
      <div slot="content" class="lishi" v-if="dialogContent == '危险源预警'">
        <!-- <chartsPannel title="charts2" class="tu1">
          <slot slot="chartContent"> -->
        <weixianyuan></weixianyuan>
        <!-- </slot>
        </chartsPannel> -->
      </div>
      <!-- 区域安全评价 -->
      <div
        slot="content"
        class="quyuanquan"
        v-if="dialogContent == '区域安全评价'"
      >
        <div class="top">
          <chartsPannel title="危险源" class="tu1">
            <slot slot="chartContent">
              <quyuweixianyuan></quyuweixianyuan>
            </slot>
          </chartsPannel>
          <chartsPannel title="工作面" class="tu2">
            <slot slot="chartContent">
              <gongzuomian></gongzuomian>
            </slot>
          </chartsPannel>
          <chartsPannel title="断层信息" class="tu1">
            <slot slot="chartContent">
              <duancengxinxi></duancengxinxi>
            </slot>
          </chartsPannel>
        </div>
        <div class="bottom">
          <chartsPannel title="评分" class="tu1">
            <slot slot="chartContent">
              <pingfeng></pingfeng>
            </slot>
          </chartsPannel>
          <chartsPannel title="危险源预警" class="tu2">
            <slot slot="chartContent">
              <yujingbaojing></yujingbaojing>
            </slot>
          </chartsPannel>
          <chartsPannel title="积水区信息" class="tu1">
            <slot slot="chartContent">
              <jishuiqu></jishuiqu>
            </slot>
          </chartsPannel>
        </div>
      </div>
      <!-- 区域监测 -->

      <!-- 水害一张图 -->
      <div
        slot="content"
        class="shuihaijiance"
        v-if="dialogContent == '水害一张图'"
      >
        <div class="top">
          <chartsPannel title="涌水量变化趋势" class="tu1">
            <slot slot="chartContent">
              <shyongshuiliang></shyongshuiliang>
            </slot>
          </chartsPannel>
          <!-- 工作面后加空格否则与区域安全评价中工作面重合 -->
          <chartsPannel title="工作面 " class="tu2">
            <slot slot="chartContent">
              <shgongzuomian></shgongzuomian>
            </slot>
          </chartsPannel>
          <chartsPannel title="积水区信息" class="tu1">
            <!-- 日产量 -->
            <slot slot="chartContent">
              <richanliang></richanliang>
            </slot>
          </chartsPannel>
        </div>
        <div class="bottom">
          <chartsPannel title="月降雨量" class="tu1">
            <!-- 地面降水量数据 -->
            <slot slot="chartContent">
              <dimianjiangshuiliang></dimianjiangshuiliang>
            </slot>
          </chartsPannel>
          <chartsPannel title="采掘工作面" class="tu2">
            <slot slot="chartContent">
              <caijuegongzuomian></caijuegongzuomian>
            </slot>
          </chartsPannel>
          <chartsPannel title="排水量数据" class="tu1">
            <slot slot="chartContent">
              <paishuiliang></paishuiliang>
            </slot>
          </chartsPannel>
        </div>
      </div>
      <!-- 地质数据管理 -->
      <div
        slot="content"
        class="dizhishuju"
        v-if="dialogContent == '地质数据管理'"
      >
        <!-- <chartsPannel title="charts2" class="tu1">
          <slot slot="chartContent"> -->
        <dizhishuju></dizhishuju>
        <!-- </slot>
        </chartsPannel> -->
      </div>
      <!-- 隐患点台账 -->
      <div
        slot="content"
        class="yinhuandian"
        v-if="dialogContent == '隐患点台账'"
      >
        <!-- <chartsPannel title="charts2" class="tu1">
          <slot slot="chartContent"> -->
        <yinhuandian></yinhuandian>
        <!-- </slot>
        </chartsPannel> -->
      </div>
      <!-- 微震 -->
      <div slot="content" class="yinhuandian" v-if="dialogContent == '微震'">
        <!-- <chartsPannel title="charts2" class="tu1">
          <slot slot="chartContent"> -->
        <weizhen></weizhen>
        <!-- </slot>
        </chartsPannel> -->
      </div>
      <!-- 风险点台账 -->
      <div
        slot="content"
        class="yinhuandian"
        v-if="dialogContent == '风险点台账'"
      >
        <!-- <chartsPannel title="charts2" class="tu1">
          <slot slot="chartContent"> -->
        <fengxiandian></fengxiandian>
        <!-- </slot>
        </chartsPannel> -->
      </div>
    </dialogs>
    <!-- 区域监测 -->
    <dialogs2
      :dialogVisible.sync="dialogVisible2"
      :dialogTitle="dialogContent2"
      :dialogWidth="dialogWidth2"
      @updatedialogContent2="updateDialogContentFn2"
    >
      <div
        slot="content"
        class="quyujiance"
        v-if="dialogContent2 == '区域监测'"
      >
        <div class="three">
          <div>
            <!-- <chartsPannel title="视频监控01"> -->
            <!-- <slot slot="chartContent"> -->
            <shipin1></shipin1>
            <!-- </slot> -->
            <!-- </chartsPannel> -->
            <!-- <chartsPannel title="视频监控02" class="tu2">
                <slot slot="chartContent">
                  <shipin2></shipin2>
                </slot>
              </chartsPannel>
            </div>
            <div class="bottom">
              <chartsPannel title="视频监控03" class="tu2">
                <slot slot="chartContent">
                  <shipin3></shipin3>
                </slot>
              </chartsPannel>
              <chartsPannel title="视频监控04" class="tu2">
                <slot slot="chartContent">
                  <shipin4></shipin4>
                </slot>
              </chartsPannel> -->
          </div>
        </div>
        <div class="one">
          <!-- <el-radio-group v-model="radioActive" style="margin-bottom: 30px">
            <el-radio-button label="呼叫记录">呼叫记录</el-radio-button>
            <el-radio-button label="广播故障信息">广播故障信息</el-radio-button>
            <el-radio-button label="视频监控">视频监控</el-radio-button>
          </el-radio-group> -->
          <!-- <chartsPannel title="呼叫记录" class="tu1" v-if="radioActive == '呼叫记录'">
          <slot slot="chartContent"> -->
          <div style="margin-bottom: 20px; background-color: #0b2c54">
            <guangbo></guangbo>
          </div>
          <!-- </slot>
        </chartsPannel> -->
          <!-- <chartsPannel title="广播故障信息" class="tu1" v-if="radioActive == '广播故障信息'" style="margin-top: 16px;">
          <slot slot="chartContent"> -->
          <div style="background-color: #0b2c54">
            <guangbo2></guangbo2>
          </div>
          <!-- </slot>
        </chartsPannel> -->
        </div>
      </div>
    </dialogs2>
    <!-- 自诊断 -->
    <el-dialog
      width="95%"
      :visible.sync="zizhengduandialogVisible"
      :before-close="zizhenduanhandleClose"
      v-draggable
      class="zizhenduan"
    >
      <span slot="title" style="font-size: 16px">自诊断</span>
      <zizhenduan></zizhenduan>
    </el-dialog>
        <!-- 视频 -->
        <el-dialog
      width="95%"
      :visible.sync="shipindialogVisible"
      :before-close="shipinhandleClose"
      class="shipin"
    >
      <span slot="title" style="font-size: 16px">视频</span>
     <div v-if="shipindialogVisible">
        <monitorComponents  :shipinList="shipincodeUrl"></monitorComponents>
     </div>
    </el-dialog>
  </div>
</template>

<script>
import monitorComponents from "@/components/monitorComponents.vue";
import axios from "@/utils/request";
import { getUserProfile } from "@/api/system/user";
import dialogs from "@/components/huazi/dialogs.vue";
import dialogs2 from "@/components/huazi/dialogs2.vue";
import chartsPannel from "@/components/huazi/chartsPannel.vue";
//弹层内各个图表
//历史报警
import lishibaojing from "@/views/pages/lishibaojing/index.vue"; //历史报警
//水害监测
import yongshuiliang from "@/views/pages/shuihaijiance/yongshuiliang.vue"; //涌水量
import yongshuiliang2 from "@/views/pages/shuihaijiance/yongshuiliang2.vue"; //涌水量2
import yuejiangyuliang from "@/views/pages/shuihaijiance/yuejiangyuliang.vue"; //月降雨量
import shishishuizhi from "@/views/pages/shuihaijiance/shishishuizhi.vue"; //实时水质PH
import shuizhizhuodu from "@/views/pages/shuihaijiance/shuizhizhuodu.vue"; //水质浊度
import shuizhidiandaolv from "@/views/pages/shuihaijiance/shuizhidiandaolv.vue"; //水质电导率
//水害预测
import yucecanshu from "@/views/pages/shuihaiyuce/yucecanshu.vue"; //预测参数
import weilaiyizhou from "@/views/pages/shuihaiyuce/weilaiyizhou.vue"; //未来一周预测结果
import jingshangxia from "@/views/pages/shuihaiyuce/jingshangxia.vue"; //井上下水文数据
import quxian from "@/views/pages/shuihaiyuce/quxian.vue"; //Q-S曲线
//水淹模拟
import shuiyanmoni from "@/views/pages/shuiyanmoni/index.vue"; //水淹模拟
//控制器
import kongzhiqi from "@/views/pages/kongzhiqi/index.vue"; //控制器
//危险源预警
import weixianyuan from "@/views/pages/weixianyuan/index.vue"; //危险源预警
//区域安全评价
import quyuweixianyuan from "@/views/pages/quyuanquan/weixianyuan.vue"; //危险源
import gongzuomian from "@/views/pages/quyuanquan/gongzuomian.vue"; //工作面
import duancengxinxi from "@/views/pages/quyuanquan/duancengxinxi.vue"; //断层信息
import pingfeng from "@/views/pages/quyuanquan/pingfeng.vue"; //评分
import yujingbaojing from "@/views/pages/quyuanquan/yujingbaojing.vue"; //危险源预警
import jishuiqu from "@/views/pages/quyuanquan/jishuiqu.vue"; //积水区信息
//区域监测
import guangbo from "@/views/pages/quyujiance/guangbo.vue"; //广播信息
import guangbo2 from "@/views/pages/quyujiance/guangbo2.vue"; //广播信息2
import shipin1 from "@/views/pages/quyujiance/shipin1.vue"; //视频监控1
import shipin2 from "@/views/pages/quyujiance/shipin2.vue"; //视频监控2
import shipin3 from "@/views/pages/quyujiance/shipin3.vue"; //视频监控3
import shipin4 from "@/views/pages/quyujiance/shipin4.vue"; //视频监控4
// 水害一张图
import shyongshuiliang from "@/views/pages/shuihaiyizhangtu/yongshuiliang.vue"; //涌水量
import shgongzuomian from "@/views/pages/shuihaiyizhangtu/gongzuomian.vue"; //工作面
import richanliang from "@/views/pages/shuihaiyizhangtu/richanliang.vue"; //日产量
import dimianjiangshuiliang from "@/views/pages/shuihaiyizhangtu/dimianjiangshuiliang.vue"; //地面降水量数据
import caijuegongzuomian from "./pages/shuihaiyizhangtu/caijuegongzuomian.vue"; //采掘工作面
import paishuiliang from "./pages/shuihaiyizhangtu/paishuiliang.vue"; //排水量数据
//地质数据管理
import dizhishuju from "@/views/pages/dizhishuju/index.vue"; //地质数据管理
//隐患点台账
import yinhuandian from "@/views/pages/yinhuandian/index.vue"; //隐患点台账
//微震
import weizhen from "@/views/pages/weizhen/index.vue"; //微震
//风险点台账
import fengxiandian from "@/views/pages/fenxiantaizhang/index.vue"; //微震
//自诊断弹层
import zizhenduan from "@/views/pages/zizhenduan/index.vue"; //自诊断
export default {
  name: "Index",
  components: {
    monitorComponents,
    dialogs,
    dialogs2,
    chartsPannel,
    //弹层内各个图表
    //历史报警
    lishibaojing, //历史报警
    //水害监测
    yongshuiliang, //涌水量
    yongshuiliang2, //涌水量2
    yuejiangyuliang, //月降雨量
    shishishuizhi, //实时水质PH
    shuizhizhuodu, //水质浊度
    shuizhidiandaolv, //水质电导率
    //水害预测
    yucecanshu, //预测参数
    weilaiyizhou, //未来一周预测结果
    jingshangxia, //井上下水文数据
    quxian, //Q-S曲线
    //水淹模拟
    shuiyanmoni, //水淹模拟
    //控制器
    kongzhiqi, //控制器
    //危险源预警
    weixianyuan, //危险源预警
    //区域安全评价
    quyuweixianyuan, //危险源
    gongzuomian, //工作面
    duancengxinxi, //断层信息
    pingfeng, //评分
    yujingbaojing, //危险源预警
    jishuiqu, //积水区信息
    //区域监测
    guangbo, //广播信息
    guangbo2, //广播信息2
    shipin1, //视频监控1
    shipin2, //视频监控2
    shipin3, //视频监控3
    shipin4, //视频监控4
    // 水害一张图
    shyongshuiliang, //涌水量
    shgongzuomian, //工作面
    richanliang, //日产量
    dimianjiangshuiliang, //地面降水量数据
    caijuegongzuomian, //采掘工作面
    paishuiliang, //排水量数据
    //地质数据管理
    dizhishuju,
    //隐患点台账
    yinhuandian,
    //微震
    weizhen,
    //风险点台账
    fengxiandian,
    //自诊断弹层
    zizhenduan,
  },
  data() {
    return {
      shipincodeUrl:[], //视频地址
      jiangshangxiaData: "Geology",
      jiangshangxiaFlag: false, //井上下水文显示隐藏
      sanweiUrl: process.env.VUE_APP_MAP_URL, //三维地图url
      dialogVisible: false, //弹层显示隐藏
      dialogContent: "历史报警", //弹层内容
      dialogWidth: "95%", //弹层宽度
      dialogVisible2: false, //弹层显示隐藏
      dialogContent2: "", //弹层内容
      dialogWidth2: "95%", //弹层宽度
      radioActive: "呼叫记录",
      gongjuxiangFlag: false, //工具箱显示隐藏
      gjxImgFlag: false, //工具箱图片显示隐藏
      user: {}, //用户信息
      dates: {
        y1: "",
        y2: "",
        y3: "",
      },
      weatherObject: {}, //天气信息
      zizhengduandialogVisible: false, //自诊断弹层显示隐藏
      shipindialogVisible: false, //视频弹层显示隐藏
    };
  },
  methods: {
    jiangshangxiaFn() {
      this.jiangshangxiaFlag = !this.jiangshangxiaFlag;
      if (this.jiangshangxiaFlag) {
        this.jiangshangxiaData = "0_0";
      } else {
        this.jiangshangxiaData = "Geology";
      }
      setTimeout(() => {
      this.postPageMessage();
    },3000)
    },
    updateDialogContentFn() {
      this.dialogContent = "";
    },
    updateDialogContentFn2() {
      this.dialogContent2 = "";
    },
    zizhengduanFn() {
      //自诊断
      this.zizhengduandialogVisible = true;
    },
    zizhenduanhandleClose() {
      this.zizhengduandialogVisible = false;
      setTimeout(() => {
        let target = document.querySelector(".zizhenduan .el-dialog");
        target.style.left = "";
        target.style.top = "";
        // target.style.marginTop = '0vh';
        target.style.width = "95%";
      }, 500);
    },
    shipinhandleClose(){
this.shipindialogVisible=false
    },
    showWheatherInfo() {
      //天气预报
      axios.get("/common/weather").then((res) => {
        if (res.data) {
          let str = res.data.date.substring(res.data.date.length - 2);
          res.data.data.forecast.forEach((item, index) => {
            if (item.date == str) {
              this.weatherObject = item;
            } else {
              this.weatherObject = res.data.data.forecast[0];
            }
          });
        }
      });
    },
    openDialog(content) {
      this.dialogWidth = "95%";

      this.dialogVisible = true;
      this.dialogContent = content;

      // if (content == "水害一张图") {
      //   this.dialogContent = '水害 "一张图"';
      // } else {
      //   this.dialogContent = content;
      // }
    },
    navTo() {
      console.log(111);
      this.$router.push({ path: "/system/dict" });
    },
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/";
          });
        })
        .catch(() => {});
    },
    getUser() {
      getUserProfile().then((response) => {
        this.user = response.data;
      });
    },
    getNowTime() {
      // 创建一个 Date 对象
      var today = new Date();
      // 获取年、月、日、时、分、秒
      var year = today.getFullYear();
      var month = today.getMonth() + 1; // 月份是从 0 开始计数的，需要加1
      var day = today.getDate();
      var hours = today.getHours();
      var minutes = today.getMinutes();
      var seconds = today.getSeconds();
      // 格式化输出
      var formattedTime =
        year +
        "." +
        (month < 10 ? "0" : "") +
        month +
        "." +
        (day < 10 ? "0" : "") +
        day +
        " " +
        (hours < 10 ? "0" : "") +
        hours +
        ":" +
        (minutes < 10 ? "0" : "") +
        minutes +
        ":" +
        (seconds < 10 ? "0" : "") +
        seconds;
      this.dates.y1 =
        year +
        "." +
        (month < 10 ? "0" : "") +
        month +
        "." +
        (day < 10 ? "0" : "") +
        day;
      this.dates.y2 =
        (hours < 10 ? "0" : "") +
        hours +
        ":" +
        (minutes < 10 ? "0" : "") +
        minutes +
        ":" +
        (seconds < 10 ? "0" : "") +
        seconds;
    },
    getWeekDay() {
      const days = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const now = new Date();
      const index = now.getDay();
      this.dates.y3 = days[index];
    },
    postPageMessage() {
      let iFrame = document.getElementById("iframe_box");
      iFrame.contentWindow.postMessage(
        {
          type: "pmInteraction",
          ilk: "pmNormal",
          des: "交互-通用交互",
          info: {
            step: "changeDivStyle",
            id: "menuControl",
            style: "left:15rem;top:10rem;",
            des: "交互-修改div的style",
          },
          from: "main",
          to: "N6EJ2I",
          num: "Geology",
        },
        this.sanweiUrl+
        '/Mine_NMGHZ/Scene_'+this.jiangshangxiaData
      );
    },
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.postPageMessage();
    // });
    setTimeout(() => {
      this.postPageMessage();
    },3000)
    window.addEventListener("message", (event) => {
      console.log(event, "989");
      if (event.data.ilk == "pmNormal" && event.data.info.step == "sendText") {
        let val = event.data.info.text;
        if (val == "历史报警") {
          this.dialogContent = "历史报警";
        } else if (val == "微震") {
          this.dialogContent = "微震";
        } else if (val == "区域安全评价") {
          this.dialogContent = "区域安全评价";
        } else if (val == "水害一张图") {
          this.dialogContent = "水害一张图";
        } else if (val == "区域检测") {
          // this.dialogContent = "区域监测";
          this.dialogContent2 = "区域监测";
        } else if (val == "水害检测") {
          this.dialogContent = "水害监测";
        } else if (val == "水害预测") {
          this.dialogContent = "水害预测";
        } else if (val == "危险源预警") {
          this.dialogContent = "危险源预警";
        } else if (val == "隐患点台账") {
          this.dialogContent = "隐患点台账";
        } else if (val == "风险点台账") {
          this.dialogContent = "风险点台账";
        }
        if (this.dialogContent2 == "区域监测") {
          this.dialogVisible2 = true;
        } else {
          this.dialogVisible = true;
        }
      }
      if(event.data.type=='openVideo'){
this.shipincodeUrl=[event.data.info.url];
console.log(this.shipincodeUrl,'视频地址');
this.shipindialogVisible=true;
      }
      // if (event.data.closeright == "Message received") {
      //   clearInterval(time);
      //   // clearInterval(time2);
      // }
      // if (event.data.msg == "exit") {
      //   state.editData = "0";
      //   setTimeout(() => {
      //     (state.leftFlag = !state.leftFlag)(
      //       (state.treeWidth = state.leftFlag ? "0" : "220px")
      //     );
      //   }, 500);
      // }
      if (event.data.closeright == "click") {
        console.log(event.data, "点击");
      }
    });
  },
  created() {
    console.log(this.sanweiUrl, "sanweiUrl");
    this.getUser();
    this.getNowTime();
    this.getWeekDay();
    setInterval(() => {
      this.getNowTime();
    }, 1000);
    this.showWheatherInfo();
  },
};
</script>

<!-- 自诊断弹层 -->
<style scoped lang="scss">
::v-deep .el-dialog__header {
  color: #fff;
  background-color: #113765;
  padding: 15px;
}
::v-deep .el-dialog__body {
  color: #fff;
  padding: 15px;
  background-color: #061f41;
}
::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
</style>
  <!-- 水害监测 -->
<style scoped lang="scss">
.shuihaijiance {
  .top,
  .bottom {
    display: flex;
    justify-content: space-between;
    .tu1 {
      // width: 360px;
      width: 24%;
      height: 360px;
    }
    .tu2 {
      // width: 760px;
      width: 50%;
      height: 360px;
    }
  }
  .bottom {
    margin-top: 12px;
  }
}
</style>
<!-- 水害预测 -->
 <style scoped lang="scss">
.shuihaiyuce {
  // display: flex;
  // justify-content: space-between;
  .left {
    width: 100%;
    height: 400px;
  }
  .right {
    // width: 69%;
    width: 100%;
    .top {
      width: 100%;
      height: 360px;
    }
  }
  .right-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    .bottom1 {
      width: 49.35%;
      // height: 358px;
      height: 358px;
    }
    .bottom2 {
      width: 49.35%;
      height: 358px;
    }
  }
}
</style>
<!-- 区域安全评价 -->
<style scoped lang="scss">
.quyuanquan {
  .top,
  .bottom {
    display: flex;
    justify-content: space-between;
    .tu1 {
      // width: 360px;
      width: 24%;
      height: 360px;
    }
    .tu2 {
      // width: 760px;
      width: 50%;
      height: 360px;
    }
  }
  .bottom {
    margin-top: 12px;
  }
}
</style>
<!-- 区域监测 -->
 <style scoped lang="scss">
.quyujiance {
  display: flex;
  justify-content: space-between;
  .one {
    // width: 54%;
    width: 52%;
  }
  .tu1 {
    // width: 360px;
    width: 100%;
    height: 360px;
  }
  .three {
    // display: flex;
    width: 47%;
    .top {
      display: flex;
      justify-content: space-between;
      .tu2 {
        width: 49.5%;
        height: 340px;
      }
    }
    .bottom {
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
      .tu2 {
        width: 49.5%;
        height: 340px;
      }
    }
    // .tu2 {
    //   width: 500px;
    // }
    // height: 720px;
  }
}
</style>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100vh;
  // background-image: url("../assets/images/背景图.png");
  position: relative;
  .avator {
    // z-index: 999;
    // position: absolute;
    // top: 30px;
    // left: 20px;
    // font-size: 24px;
    display: flex;
    align-items: center;
    .avatar-wrapper {
      display: flex;
      align-items: center;
    }
    .names {
      // width: 70px;
      height: 30px;
      cursor: default;
      padding: 0px 10px 32px 10px;
      line-height: 30px;
      text-align: center;
      color: rgba(255, 255, 255, 0.9);
      // margin-left: 10px;
      background: linear-gradient(
        270deg,
        rgba(24, 91, 173, 0.6) 0%,
        rgba(146, 183, 228, 0.1) 81.25%
      );
    }
  }
  .top-right {
    position: absolute;
    top: 30px;
    right: 5px;
    display: flex;
    align-items: center;
    .times {
      font-size: 20px;
      .t1 {
        color: #fff;
      }
      .t2 {
        font-size: 12px;
        text-align: right;
        color: rgba(255, 255, 255, 0.8);
      }
    }
    .line {
      margin: 0 20px;
      width: 1px;
      height: 30px;
      background-color: rgba(255, 255, 255, 0.3);
    }
    .weather {
      text-align: center;
      color: #fff;
      margin-right: 20px;
    }
    .topRight {
      .t3 {
        color: #fff;
      }
    }
  }
  .zizhengduan {
    position: absolute;
    top: 50%;
    right: 0;
    width: 50px;
    height: 50px;
    // transform: rotate(-180deg);
  }
  .topImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    pointer-events: none; /* 使图片不响应鼠标事件 */
  }
  .jingshang {
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 100px;
    left: 7.5vw;
  }
  .gongjuxiangImg {
    position: absolute;
    top: 100px;
    right: 20px;
    width: 50px;
    height: 50px;
  }
  //   .topTitle {
  //     position: absolute;
  //     // top: 30px;
  //     top: 3.5%;
  //     // left: 780px;
  //     white-space: nowrap;
  //     text-size-adjust: 100%;
  //     left: 39%;
  //     font-size: 1.5vw;
  //     font-weight: 700;
  //     letter-spacing: 10px;
  //     width: 20%;
  // text-align: center;
  //     // height: 120px;
  //     pointer-events: none;
  //     color: rgba(255, 255, 255, 0.9);
  //   }
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
<style scoped lang="scss">
.gongjuxiang {
  width: 280px;
  height: 680px;
  border: 1px solid #0f5196;
  background-color: #061f41;
  color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  .top {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: #0f3360;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    border-radius: 8px 8px 0 0;
  }
  .bottom {
    padding: 10px 10px 0 10px;
    .zaihaititle {
      margin: 12px 0;
      font-size: 14px;
    }
    .item {
      padding-top: 5px;
      width: 80px;
      height: 60px;
      background-color: #0b2c54;
      border-radius: 5px;
      text-align: center;
      .txt {
        margin-top: 5px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
        cursor: default;
      }
    }
    .item-bottom {
      display: flex;
      margin-top: 10px;
      // justify-content: space-between;
      .item2 {
        margin-left: 10px;
      }
    }
  }
}
.nav {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%);
}
</style>
<style scoped lang="scss">
::v-deep.el-popper {
  background-color: #244b77 !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}
::v-deep .el-dropdown-menu__item--divided {
  color: #eee !important;
}
::v-deep .popper__arrow::after {
  border-bottom-color: #244b77 !important;
}
::v-deep .el-dropdown-menu__item--divided:before {
  background-color: transparent !important;
}
::v-deep .el-dropdown-menu__item--divided {
  margin: 0 !important;
}
.el-dropdown-menu--medium .el-dropdown-menu__item {
  text-align: center;
}
</style>


